<template>
  <div>
    <el-tooltip class="item" effect="dark" :disabled="hasTooltip" placement="bottom">
      <div class="font-size-16 font-weight-700">{{ title }}：{{ model.totalPlantPrice | moneyFilterNoUnit }}</div>
      <div slot="content">
        <div style="line-height:30px;" v-html="tips"></div>
      </div>
    </el-tooltip>
    <!-- <div class="font-size-16 font-weight-700">{{ title }}：{{ model.totalPlantPrice | moneyFilterNoUnit }}</div> -->
    <div class="flex align-center padding-top-10">
      <span class="color-666666">上一年执行：{{ model.totalLastPlantPrice | moneyFilterNoUnit }}</span>
      <span class="padding-left-20 color-666666">差异：</span>
      <span class="color-666666" v-if="isIncome" :class="model.totalPlantDeviation > 0 ? 'color-green' : 'color-red'">{{ model.totalPlantDeviation | moneyFilterNoUnit }}</span>
      <span class="color-666666" v-if="!isIncome" :class="model.totalPlantDeviation < 0 ? 'color-green' : 'color-red'">{{ model.totalPlantDeviation | moneyFilterNoUnit }}</span>
      <span class="padding-left-right-5">/</span>
      <span v-if="isIncome" :class="model.totalPlantDeviationPrice > 0 ? 'color-green' : 'color-red'">{{ model.totalPlantDeviationPrice > 0 ? '↑' : '↓' }}{{ Math.abs(model.totalPlantDeviationPrice || 0) | accMul }}%</span>
      <span v-if="!isIncome" :class="model.totalPlantDeviationPrice < 0 ? 'color-green' : 'color-red'">{{ model.totalPlantDeviationPrice > 0 ? '↑' : '↓' }}{{ Math.abs(model.totalPlantDeviationPrice || 0) | accMul }}%</span>
    </div>
    <bar class="bar-box" ref="bar" :ch-config="barConfig" :banLegendDefaultClick="true"></bar>
  </div>
</template>
<script>
  import Bar from '@c/echarts/bar';
  import { barConfig } from '@js/echartsConfig';

  export default {
    props: {
      title: {
        type: String,
        default: '',
      },
      tips: {
        type: String,
        default: '',
      },
      model: {
        type: Object,
        default: () => {
          return {};
        },
      },
      //是收入还是支出
      isIncome: {
        type: Boolean,
        default: true,
      },
      //tips是否禁止
      hasTooltip: {
        type: Boolean,
        default: true,
      },
    },

    data() {
      return {
        barConfig: this.lodash.cloneDeep(barConfig),
      };
    },

    watch: {
      model: {
        deep: true,
        handler(obj) {
          this.getMonthCash(obj);
        },
      },
    },

    methods: {
      getMonthCash(obj) {
        //初始化x轴坐标
        obj.monthCashFlowList.forEach(item => {
          this.barConfig.xAxisData.push(item.month + '月');
          this.barConfig.list[0].data.push(item.monthPlantPrice);
        });
        console.log(this.barConfig)
        this.$refs.bar.initChart();

        //初始化x轴坐标
        // let month = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
        // month.forEach(item => {
        //   this.barConfig.xAxisData.push(item + '月');
        // });
        // this.barConfig.list[0].data = [100, 112, -120, 30, 70, 80, -30, -50, 89, -20, 163, 56];
        // this.$refs.bar.initChart();
      },

      //初始化柱状图
      initBar() {
        this.barConfig.dataZoom = false;
        this.barConfig.list[0].barWidth = '40%';
        this.barConfig.left = '5px';
        this.barConfig.gridTop = '0';
        this.barConfig.gridBottom = '0';
        this.barConfig.list[0].label.show = false;
        this.barConfig.yAxis.show = false;
        this.barConfig.tooltip.show = false;
        this.barConfig.list[0].itemStyle.normal.color = function (params) {
          let color = params.value > 0 ? '#4E9475' : '#FF7A81';
          return color;
        };
      },
    },

    created() {
      this.initBar();
    },

    components: { Bar },
  };
</script>

<style lang="scss" scoped>
  .bar-box {
    width: 100%;
    height: 200px;
  }
</style>
